<template>
	<view class="content_heard">
		<button class="login_button_img" open-type="chooseAvatar" @chooseavatar="chooseavatar">
			<image  class="avatar_img" :src="userInfo?.avatarUrl" ></image>
		</button>
		<button class="login_button" @click="nickNameClick">{{ userInfo?.nickName?userInfo.nickName:'微信用户'}}</button>
		
	</view>
	<uni-popup ref="inputDialog" type="dialog">
	
			<template>
				<div class="popup_content">
					<view class="title">修改昵称</view>
					<view class="input_border">
						<input type="nickname" placeholder="请输入新的昵称" @input="nickNameInput"></input>
					</view>
					<view class="foot" >
						<view class="foot_view" @click="closeInput">
							取消
						</view>
						<view class="foot_view" @click="confimer">
							确定
						</view>
					</view>
				</div>
				
			</template>
			
	
			
	</uni-popup> 
	
	<view class="content_list">
		<uni-list>
			<template v-for="(item , index) in list" :key="index">
				<uni-list-item style="line-height: 80rpx;" :thumb="item.icon" showArrow :title="item.name"   :to="item.path">
					
				</uni-list-item>
			</template>
			
		</uni-list>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {uniStorage,} from "../../utils"
import{ upload } from "../../utils/request.js"
import { uplodUrl,upDateUserInfo } from "../../api"
let userInfo = ref();
let formData = ref({
	user_name:'',//用户呢称
	assistant_name:'',//助手昵称
	
})
let inputDialog = ref()
let inputName = ref()
onLoad(()=>{
	userInfo.value = uniStorage.getValue("userInfo")
	console.log(userInfo.value)
})

let list = ref([
	{
		icon:'/static/mine/mine_record.png',
		name:'打卡记录',
		path:'/pages/checkInRecord/index'
	},{
	icon:'/static/mine/mine_record.png',
	name:'我的套餐',
	path:'/pages/minePackage/minePackage'
},{
	icon:'/static/mine/consumption.png',
	name:'消费记录',
	path:'/pages/recordsOfConsumption/recordOfConsumption'
},{
	icon:'/static/mine/aboutAs.png',
	name:'关于我们',
	path:'/pages/aboutAs/aboutAs'
}])

function onClick(item){
	console.log(item)
}
async function chooseavatar(e){
	console.log("choose",e);
	
	let fileUrlJSON = await upload({url:uplodUrl,file:e.detail.avatarUrl})
	let file = JSON.parse(fileUrlJSON.data)
	console.log(file)
	userInfo.value.avatarUrl= file.data.url
	// TODO: 更新 userInfo 
	await upDateUserInfo(userInfo.value)
	uniStorage.save('userInfo',userInfo.value)
}

function nickNameClick(){
	inputDialog.value.open()
}
function nickNameInput(e){
	inputName.value = e.detail.value
}
async function confimer(){
	userInfo.value.nickName = inputName.value
	// TODO: 更新 userInfo
	await upDateUserInfo(userInfo.value)
	uniStorage.save('userInfo',userInfo.value)
	closeInput()
}
function closeInput(){
	inputDialog.value.close()
}
</script>

<style lang="scss">
	.popup_content{
		width:500rpx;
		border-radius: 20rpx;
		background:#fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.title{
			margin:20rpx 0;
			
		}
		.input_border{
			margin:30rpx 0;
			// border:solid 1px red;
			input{
				padding:10rpx 20rpx;
				border:solid 1rpx #999;
				border-radius: 8rpx;
			}
		}
		.foot{
			width:100%;
			display: flex;
			align-items: center;
			height:90rpx;
			justify-content: space-around;
			.foot_view{
				width:50%;
				height:100%;
				line-height: 90rpx;
				text-align: center;
			}
		}
	}
.content_heard{
	padding:80rpx 50rpx ;
	background:linear-gradient(0deg,  #f1f1f1,#9ef2a9);;
	// border:solid 1rpx #333;
	margin:10rpx 20rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.login_button_img{
		width:90rpx;
		height:90rpx;
		border-radius: 50%;
		padding:0;
		margin:0;
		.avatar_img{
			width:90rpx;
			height:90rpx;
			border-radius: 50%;
			display: block;
			
		}
	}
	.login_button_img::before{
		content:'';
		background:transparent;
		background:transparent;
		padding:0;
		margin:0;
		border:none;
		border-radius: 50%;
	}
	
	.login_button{
		display: block;
		background: transparent;
		width:fit-content;
		padding:0;
		margin:0;
		
	}
	.login_button::after{
		display: block;
		content: '';
		background:transparent;
		padding:0;
		margin:0;
		border:none;
	}
}
.content_list{
	
	margin:0 20rpx;
	margin-top:300rpx;
}
</style>
